<!DOCTYPE html>
<html lang="zh-CN">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作日志列表2</title>
        <!--引用css/bootstrap.min.css -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>

    <style>
        .table th, .table td { vertical-align: middle; }
        .pagination .page-link { min-width: 36px; text-align: center; }
        .pagination-summary { margin-top: 16px; color: #888; }
        .search-bar input, .search-bar select { min-width: 120px; margin-right: 8px; }
        .search-bar { margin-bottom: 16px; }
        .pagination-bar {
            font-size: 13px;
        }
        .pagination-sm .page-link {
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            border-radius: 4px !important;
            margin: 0 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .pagination-sm .active .page-link {
            background: #1677ff;
            color: #fff;
            border-color: #1677ff;
        }
        .form-select-sm, .form-control-sm {
            font-size: 13px;
            height: 32px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
{% verbatim %}
<div id="app" class="container-fluid mt-4">
    <div class="card">
        <div class="card-body">
            <!-- 搜索栏 -->
            <form class="row search-bar align-items-center g-2 mb-3">
                <div class="col-auto">
                    <input type="text" class="form-control" placeholder="用户名" >
                </div>
                <div class="col-auto">
                    <select class="form-select">
                        <option value="">状态</option>
                        <option value="成功">成功</option>
                        <option value="失败">失败</option>
                    </select>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary">查 询</button>
                </div>
            </form>
            <!-- 表格 -->
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>登录地址</th>
                            <th>登录地点</th>
                            <th>浏览器</th>
                            <th>操作系统</th>
                            <th>登录标签</th>
                            <th>操作信息</th>
                            <th>登录状态</th>
                            <th>登录日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in pageInfo.items" :key="item.id">
                            <td><input type="checkbox" :value="item.id"></td>
                            <td>{{ item.id }}</td>
                            <td>{{ item.user_name }}</td>
                            <td>{{ item.login_ip }}</td>
                            <td>{{ item.login_location }}</td>
                            <td>{{ item.browser }}</td>
                            <td>{{ item.os }}</td>
                            <td>{{ item.login_tag }}</td>
                            <td>{{ item.operate_info }}</td>
                            <td>
                                <span :class="['badge', item.status === 'success' ? 'bg-success' : 'bg-danger']">{{ item.status }}</span>
                            </td>
                            <td>{{ item.login_date }}</td>
                            <td><a href="#" class="text-primary">详情</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页部分处理，pageInfo对象数据体  start -->
            <div class="d-flex justify-content-end align-items-center mt-3 flex-wrap">
                <div class="d-flex align-items-center pagination-bar">
                    <span class="text-secondary small">共 {{ pageInfo.total }} 条</span>
                    <select v-model.number="pageInfo.page_size" class="form-select form-select-sm w-auto mx-1 me-3" @change="changePageSize"
                            style="min-width: 80px;white-space:nowrap;">
                        <option :value="5">5条/页</option>
                        <option :value="10">10条/页</option>
                    </select>
                    <ul class="pagination pagination-sm mb-0 align-items-center">
                        <li class="page-item" :class="{disabled: pageInfo.current_page === 1}">
                            <a class="page-link" href="#" @click.prevent="changePage(pageInfo.current_page-1)">&lt;</a>
                        </li>
                        <li class="page-item" v-for="page in visiblePages" :key="page"
                            :class="{active: pageInfo.current_page === page, disabled: pageInfo.page === '...'}">
                            <a v-if="page !== '...'" class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                            <span v-else class="page-link">...</span>
                        </li>
                            <a class="page-link" href="#" @click.prevent="changePage(pageInfo.current_page+1)">&gt;</a>
                        </li>
                    </ul>
                    <span class="ms-2 small">前往</span>
                    <input type="number" min="1" :max="pageInfo.total_pages" v-model.number="pageInfo.goto_page" @keyup.enter="jumpToPage"
                           class="form-control form-control-sm d-inline-block mx-1" style="width:50px;">
                    <span class="small">页</span>
                    <button class="btn btn-outline-secondary btn-sm ms-1" @click="jumpToPage">跳转</button>
                </div>
            </div>
            <!-- 分页部分处理，pageInfo对象数据体  end -->
        </div>
    </div>
</div>
{% endverbatim %}
<script src="/static/js/vue.global.js"></script>
<script>
const { createApp, ref, computed, watch,onMounted,reactive  } = Vue;

const app=createApp({
    setup() {
        // 定义pageInfo对象
        const pageInfo=reactive({
            page:1,
            page_size:10,
            total:0,
            total_pages:0,
            items:[],
            current_page:1,
            goto_page:1,
        });

       // const gotoPage = ref(1);
       /**查询日志列表数据
         * @param start
         * @param page_size
         * @param paramStr
        */
        const query_log_list=(start=1,page_size=10,paramStr='')=>{
            console.log("start:", start);
            axios({
                method: 'get',
                url: '/blog/api/user/operate_log/?page='+start+'&page_size='+page_size+'&'+paramStr,
            }).then(res => {
                if (res.data.code === 0) {
                    // 封装pageInfo对象
                    pageInfo.items = res.data.result.data;
                    pageInfo.total = res.data.result.total;
                    pageInfo.total_pages = res.data.result.total_pages;
                    pageInfo.page_size = res.data.result.page_size;
                    pageInfo.page= res.data.result.page;
                }
            }).catch(err => {
                console.log(err);
            })
        }
        //生成页码数据，圾
        const visiblePages = computed(() => {
            let pages = [];
            let total = pageInfo.total_pages;
            let cur = pageInfo.current_page;
            if (total <= 7) {
                for (let i = 1; i <= total; i++) pages.push(i);
            } else {
                if (cur <= 4) {
                    pages = [1,2,3,4,5,'...',total];
                } else if (cur >= total - 3) {
                    pages = [1,'...',total-4,total-3,total-2,total-1,total];
                } else {
                    pages = [1,'...',cur-1,cur,cur+1,'...',total];
                }
            }
            return pages;
        });


        /**
         * 改变页码
         * @param page
         */
        function changePage(page) {
            console.log("===changePage（参数值）:", page);
            if (typeof page === 'string') return;
            if (page >= 1 && page <= pageInfo.total_pages) {
                pageInfo.current_page = page;
                console.log("===changePage:", pageInfo.current_page);
                start = pageInfo.current_page;
                query_log_list(start,pageInfo.page_size);

            }
        }
        // 切换面页大小时，重置当前页为1
        const changePageSize = () => {
            console.log("===changePageSize:", pageInfo.page_size);
            pageInfo.current_page = 1;
            query_log_list(start=1,pageInfo.page_size);
        }


        function jumpToPage() {
            if (pageInfo.goto_page >= 1 && pageInfo.goto_page <= pageInfo.total_pages) {
                pageInfo.current_page = pageInfo.goto_page;
                start = pageInfo.current_page;
                query_log_list(start,pageInfo.page_size);
            }
        }



        //选择页数时，重置当前页为1
<!--        watch(pageInfo.page_size, () => {-->
<!--             console.log("watch:===========page_size:", pageInfo.page_size);-->
<!--             pageInfo.current_page = 1;-->
<!--        });-->


<!--        watch(pageInfo.current_page, (val) => {-->
<!--            console.log("watch:===========current_page:", val);-->
<!--            gotoPage.value = val;-->
<!--        });-->
        onMounted(() => {
           console.log('页面加载完成');
           query_log_list();
        });

        return {
            visiblePages,
            changePage,
            jumpToPage,
            changePageSize,
            pageInfo,
        };
    }
});
app.mount('#app');
</script>
</body>
</html>